<template>
  <AuthLayout>
    <template #header>
      <h2 class="login-title">系统登录</h2>
    </template>

    <form @submit.prevent="handleLogin" class="login-form">
      <div class="form-row">
        <label for="credential" class="form-label">用户名</label>
        <input
          type="text"
          id="credential"
          v-model="form.credential"
          placeholder="请输入用户名或邮箱"
          required
          autocomplete="off"
        />
      </div>

      <div class="form-row">
        <label for="password" class="form-label">密　码</label>
        <input
          type="password"
          id="password"
          v-model="form.password"
          placeholder="请输入密码"
          required
        />
      </div>

      <div class="form-actions">
        <button type="submit" class="btn-login" :disabled="loading">
          登　录
        </button>
      </div>
    </form>

    <template #footer>
      <div class="register-link">
        <p>还没有账号？<router-link to="/register">立即注册</router-link></p>
      </div>
    </template>
  </AuthLayout>
</template>

<script>
import AuthLayout from '@/layouts/AuthLayout'
import { login } from '@/api/user'

export default {
  components: {
    AuthLayout
  },
  data() {
    return {
      form: {
        credential: 'Tom',
        password: '123456'
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      if (!this.form.credential) {
        this.$message ? this.$message.warning('用户名或邮箱不能为空') : alert('用户名或邮箱不能为空')
        return
      }
      if (!this.form.password) {
        this.$message ? this.$message.warning('密码不能为空') : alert('密码不能为空')
        return
      }
      this.loading = true
      try {
        // 调用登录接口 并存储token
        const res = await login({
          credential: this.form.credential,
          password: this.form.password
        })
        if (res.token) {
          localStorage.setItem('token', res.token)
          // 存储用户名等信息
          localStorage.setItem('userInfo', JSON.stringify({
            userid: res.userId,
            username: res.username,
            email: res.email,
            role: res.role,
          }))
        }
        this.$message && this.$message.success('登录成功')
        this.$router.push('/index')
      } catch (error) {
        console.error('登录失败:', error)
        this.$message.error((error.message || '登录失败，') + '请联系管理员')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.login-title {
  margin-bottom: 1.5rem;
  text-align: center;
}

.login-form {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.form-label {
  display: inline-block;
  width: 3em; /* 固定宽度为3个汉字宽度 */
  margin-right: 15px;
  font-weight: 500;
  color: #333;
  text-align: justify; /* 两端对齐 */
  text-align-last: justify; /* 最后一行两端对齐 */
}

.form-row input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.btn-login {
  width: calc(100% - 3em - 15px); /* 减去label宽度和margin */
  margin-left: calc(3em + 15px); /* 与输入框对齐 */
  padding: 0.75rem;
  background-color: #4a6cf7;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  margin-top: 0.5rem;
}

.register-link {
  text-align: center;
  margin-top: 1.5rem;
}

.register-link a {
  color: #4a6cf7;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .form-label {
    width: auto;
    margin-right: 0;
    margin-bottom: 0.5rem;
    text-align: left;
    text-align-last: left;
  }
  
  .form-row input {
    width: 100%;
  }
  
  .btn-login {
    width: 100%;
    margin-left: 0;
  }
}
</style>